<!-- 邀请或参与拼团 -->
<template>
	<view class="ll-group">
		<view class="ll-group-container">
			<view
				class="ll-group-joinOrInvite"
				:style="{
					backgroundImage: `url(${type == 'invite' ? inviteBgUrl : joinBgUrl})`
				}"
			>
				<view class="seektime df alic">
					<image src="@/static/images/order/img_tc_time.png" class="seventeen"></image>
					<image src="@/static/images/order/img_invite_shou.png" class="hand"></image>
					<text>2022/09/22 18:00-18:30</text>
				</view>
				<view class="groupItem df flc">
					<!-- 商品信息 -->
					<view class="layout-main-item-content">
						<view class="layout-main-item-content-left">
							<image :src="item.faceImg" mode="aspectFill" />

							<template>
								<image class="fullReminder" :src="fullReminder" />
							</template>
						</view>
						<view class="layout-main-item-content-right flex-col row-around">
							<view class="product-title">
								{{ item.productName || '' }}
							</view>
							<view class="product-sale flex row-between col-end">
								<view class="already-sale">已售{{ item.saleAmount || 0 }}份</view>
								<view class="can-get" v-if="item.commissionYuan && item.commissionYuan > 0">
									<text class="get-money-remind">赚：</text>
									<text class="money-icon">￥</text>
									<text class="get-money">{{ item.commissionYuan || 0 }}</text>
								</view>
							</view>
							<view class="product-price">
								<view class="product-price-right flex">
									<view class="sale-price">
										￥
										<text>{{ item.productSalePriceYuan }}</text>
									</view>

									<view class="origin-price" :class="{ 'flex-end': !item.discount }">
										<template v-if="item.discount">
											<view class="product-price-right-discount">{{ item.discount }}折</view>
										</template>
										<view class="price-number">￥{{ item.productOriginPriceYuan }}</view>
									</view>
								</view>
								<view class="product-price-left flex col-center row-end" v-if="item.cpsRadio && item.cpsRadio > 0">
									<image src="@/static/images/home/icon_home_fan@3x.png" />
									<text class="discount dfcc">
										{{ item.cpsRadio }}
										<text class="littie-text">%</text>
									</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 商品地址 -->
					<view
						class="order-item-addr"
						@click.stop="handleOpenLocation(item)"
						:style="{ backgroundImage: `url(${IMG_URL}order/img_order_position.png)` }"
					>
						<view class="order-item-addr-info">
							<view class="order-item-addr-info-title">探店门店：{{ item.exploreStore }}</view>
							<view class="order-item-addr-info-details">{{ item.exploreStoreAddress }}</view>
						</view>
						<image class="order-item-addr-go" src="/static/images/order/icon_order_right.png" />
					</view>
				</view>

				<view class="groupMember">
					<view class="dfcc text">
						<view class="line"></view>
						<view class="restPerson tac" v-if="type == 'invite'">
							再邀请
							<text style="color: #5359ff">{{ needNum }}人</text>
							即可拼团成功
						</view>
						<view class="restPerson tac" v-else>
							仅剩
							<text style="color: #5359ff">{{ needNum }}个</text>
							名额
						</view>
						<view class="line1"></view>
					</view>
					<view class="memberNum dfcc">
						<view class="dote" v-for="item in memberList">
							<image :src="item.dyPortrait"></image>
						</view>
						<view class="dote" v-for="item in needNum"></view>
					</view>
					<view class="restTime dfcc">
						{{ type == 'invite' ? `拼团剩余时间：` : `` }}
						<countDown
							:timestamp="restTime"
							:showDays="true"
							:separatorSize="18"
							separatorColor="#ff6b11"
							color="#ff6b11"
							fontSize="20rpx"
							height="24"
							:dayIsZh="true"
							:hideZeroDay="true"
							background="#FDF4EF"
						></countDown>
						{{ type !== 'invite' ? `后结束` : `` }}
					</view>
					<button open-type="share" class="share-btn flex col-center row-center operate dfcc" v-if="type == 'invite'">
						邀请好友拼团探店
					</button>
					<button class="flex col-center row-center operate dfcc" v-if="type !== 'invite'" @click="joinTOGroup">
						参与本次拼团探店
					</button>
				</view>
			</view>
		</view>
		<!-- <Popup class="invitePopup" :value="showPopup"></Popup> -->
	</view>
</template>
<script>
// import Popup from './groupComponents/groupSeekPopup.vue';
import { defaultImageUrl } from '@/utils';
import { groupSeekApplyDetail } from '@/api/group';
import DistributionNavBar from '@/components/distributionNavBar/indeHome';
import CountDown from '@/components/ECountDown/index.vue';

export default {
	name: 'invite',
	data() {
		return {
			type: '',
			item: {},
			memberList: [],
			// 拼团人数差额
			needNum: 0,
			restTime: 0
		};
	},
	components: {
		// Popup,
		DistributionNavBar,
		CountDown
	},
	computed: {
		inviteBgUrl() {
			return require('@/static/images/order/img_invite_bg.png');
		},
		joinBgUrl() {
			return require('@/static/images/order/img_join_bg.png');
		},
		IMG_URL() {
			return defaultImageUrl;
		}
	},
	onLoad(params) {
		const { id, type } = params;
		this.type = type;
		this.getGroupDetail(id);
	},

	// 分享邀请拼团

	onShareAppMessage() {
		const { getUserOperateId = 0 } = this;
		let shareObj;
		shareObj = {
			title: `【拼团探店中】${this.item.productName}`,
			path: `productOrderPage/groupSeekInvaitation?id=${this.item.id}&type=join`,
			imageUrl: this.item.faceImg,
			success() {
				console.log('转发发布器已调起');
			},
			fail() {
				console.log('转发发布器调起失败');
			}
		};
		return shareObj;
	},
	methods: {
		// 获取拼团订单数据
		async getGroupDetail(id) {
			const params = {
				id
			};
			let { code, data } = await groupSeekApplyDetail(params);
			if (!data) {
				this.backToHomepage();
				return;
			}
			if (code === 200) {
				this.item = data;
				this.memberList = data.seekGroupInfo.memberList;
				this.restTime = data.seekGroupInfo.groupTimeLength / 1000;
				this.needNum = Number(data.seekGroupInfo.totalNum - data.seekGroupInfo.teamer);
			}
		},
		handleOpenLocation(list) {
			// 查看地图
			uni.openLocation({
				latitude: Number(list.latitude),
				longitude: Number(list.longitude),
				name: list.exploreStore,
				address: list.exploreStoreAddress,
				success: () => {
					console.log('success');
				},
				fail: (e) => {
					console.log(e);
				}
			});
		},
		//获取数据失败返回首页
		backToHomepage() {
			uni.showModal({
				title: '提示',
				showCancel: false,
				content: '数据加载失败，返回首页',
				success: (res) => {
					uni.switchTab({
						url: '/pages/tabBar/Index'
					});
				}
			});
		},

		// 参与探店
		joinTOGroup() {
			const id = this.item.id;
			uni.redirectTo({ url: `/pages/tandian/ApplyTandian?id=${id}` });
		}
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/common.scss';

.ll-group {
	@include Db_iosBottomDistance(120rpx);
	width: 100vw;
	height: 100vh;
	background: #f6f6f6;
	position: relative;

	&-container {
		height: 690rpx;
		background-repeat: no-repeat;
	}

	&-joinOrInvite {
		height: 426rpx;

		.groupItem {
			width: 710rpx;
			height: 380rpx;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 24rpx;
		}
	}

	.ll-group-joinOrInvite {
		padding: 276rpx 20rpx 20rpx;
		background-size: 100%;
	}

	.seektime {
		width: 710rpx;
		height: 92rpx;
		position: relative;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx 24rpx;
		margin-bottom: 20px;

		.seventeen {
			width: 120rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}

		.hand {
			width: 62rpx;
			height: 32rpx;
			position: absolute;
			bottom: 80rpx;
			right: 52rpx;
		}

		text {
			width: 328rpx;
			height: 28rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 28rpx;
		}
	}

	.groupItem {
		margin-bottom: 20px;

		.layout-main-item-content {
			display: flex;
			// align-items: center;
			padding-bottom: 24rpx;
			position: relative;

			&-left {
				width: 200rpx;
				height: 200rpx;
				overflow: hidden;
				// position: relative;

				image {
					margin: 0;
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					// position: absolute;
					// left: 50%;
					// top: 0;
					// transform: translateX(-50%);

					&.fullReminder {
						display: none;
						position: static;
					}
				}
			}

			&-right {
				flex: 1;
				// height: 200rpx;
				padding-left: 20rpx;

				.product-title {
					height: 80rpx;
					color: #333;
					font-size: 28rpx;
					line-height: 40rpx;
					font-weight: bold;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.product-price {
					color: #999;
					font-size: 24rpx;

					// margin-top: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&-left {
						width: auto;
						background: #fdf4ef;
						border-radius: 8rpx;
						padding-right: 8rpx;

						.discount {
							font-family: font-number;
							font-size: 28rpx;
							color: #ff6b11;
							width: auto;
							background: #fdf4ef;
							border-radius: 8rpx;
							padding-right: 8rpx;
							margin-left: 4rpx;
							margin-bottom: 4rpx;

							.littie-text {
								font-size: 20rpx;
							}
						}

						image {
							width: 44rpx;
							height: 40rpx;
						}
					}

					&-right {
						.sale-price {
							color: #000;
							display: inline-block;
							margin-right: 4rpx;

							text {
								font-size: 40rpx;
								text-decoration: blink;
								@include Db_moneyStyle();
								color: #000;
							}
						}

						.origin-price {
							font-size: 0;
						}

						.price-number {
							font-size: 16rpx;
							display: inline-block;
							vertical-align: middle;
							text-decoration: line-through;
						}

						&-discount {
							margin-left: 4rpx;
							font-weight: 500;
							color: #ff6b11;
							font-size: 16rpx;
							font-weight: 500;
							text-align: center;

							height: 28rpx;
							line-height: 28rpx;
							padding: 2rpx 10rpx;

							background: #fdf4ef;
							border-radius: 6rpx;
						}
					}
				}

				.product-sale {
					margin-top: -20rpx;

					.already-sale {
						font-size: 24rpx;
						color: #666;
					}

					.can-get {
						.get-money-remind {
							font-size: 24rpx;
						}

						.money-icon {
							color: #ff6b11;
							font-size: 24rpx;
						}

						.get-money {
							color: #ff6b11;
							font-size: 56rpx;
							font-family: font-number;
						}
					}
				}

				.product-discount {
					margin-top: 24rpx;
					display: flex;

					&-label {
						height: 48rpx;
						display: flex;
						align-items: center;
						background: #fff0e7;
						border-radius: 12rpx;
						margin-left: 8rpx;
						padding: 0 12rpx;

						text {
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #ff6b11;
						}

						&:first-child {
							margin-left: 0;
						}
					}
				}
			}

			&-left {
				image {
					// &:first-child {
					// 	opacity: 0.5;
					// }
					&.fullReminder {
						display: block;
						position: absolute;
						top: 20rpx;
						left: 20rpx;
						width: 160rpx;
						height: 160rpx;
						z-index: 1;
					}
				}
			}

			// &-right {
			// 	.product-title,
			// 	.product-price-left {
			// 		opacity: 0.5;
			// 	}
			// }
		}

		.order-item-addr {
			padding: 20rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-size: 100% 100%;

			&-info {
				&-title {
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
				}

				&-details {
					font-size: 22rpx;
					font-weight: 400;
					color: #666666;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					max-width: 554rpx;
					margin-top: 10rpx;
				}
			}

			&-go {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.groupMember {
		width: 710rpx;
		height: 566rpx;
		background: #ffffff;
		border-radius: 24px;
		padding: 40rpx 24rpx 24rpx;

		.line {
			width: 80rpx;
			height: 2rpx;
			background: linear-gradient(270deg, #cacaca 0%, #ffffff 100%);
		}

		.line1 {
			width: 80rpx;
			height: 2rpx;
			background: linear-gradient(270deg, #ffffff 0%, #cacaca 100%);
		}

		.restPerson {
			max-width: 382rpx;
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 50rpx;
		}

		.text {
			margin-bottom: 48rpx;
		}

		.memberNum {
			// max-width: 568rpx;
			flex-wrap: wrap;

			.dote {
				width: 88rpx;
				height: 88rpx;
				background: #f5f5fc;
				border: 2rpx solid #ffffff;
				margin-right: 32rpx;
				margin-bottom: 32rpx;
				border-radius: 50%;
				background-image: url('@/static/images/order/icon_invite_add.png');
				background-repeat: no-repeat;
				background-size: 55%;
				background-position: right 18rpx bottom 18rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}

		.restTime {
			margin-top: 18rpx;
			margin-bottom: 26rpx;
			color: #ff6b11;
			font-size: 24rpx;
		}

		.operate {
			width: 662rpx;
			height: 88rpx;
			background: linear-gradient(311deg, #8266ff 0%, #5359ff 100%);
			border-radius: 24rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
}

.dfcc {
	display: flex;
	justify-content: center;
	align-items: center;
}

.df {
	display: flex;
}

.jutc {
	justify-content: center;
}

.alic {
	align-items: center;
}

.flc {
	flex-direction: column;
}

.tac {
	text-align: center;
}

.w1 {
	width: 100%;
}
</style>
